<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬浮按钮</title>
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.btn {
	    color: purple;
	    text-transform: uppercase;
	    text-decoration: none;
	    border: 2px solid purple;
	    padding: 10px 20px;
	    font-size: 17px;
	    font-weight: bold;
	    background: transparent;
	    position: relative;
	    transition: all 1s;
	    overflow: hidden;
	    cursor: pointer;
	}
	
	.btn:hover {
	    color: white;
	}
	
	.btn::before {
	    content: '';
	    position: absolute;
	    height: 100%;
	    width: 0%;
	    top: 0;
	    left: -40px;
	    transform: skewX(45deg);
	    background-color: purple;
	    z-index: -1;
	    transition: all 1s;
	}
	
	.btn:hover::before {
	    width: 160%;
	}
</style>
<body>
    <button class="btn">
        Diagonal Swipe
      </button>
</body>
</html>